<template>
  <v-card height="100%">
    <v-card-title class="text-center text-h5 my-3">Reset password</v-card-title>
    <v-divider></v-divider>
    <v-card-text class="">
      <p class="text-center text-h4 font-weight-bold ma-auto mt-15">I am Logo.com</p>
      <v-container>
        <v-form>
          <p class="my-2 pa-auto">Enter new password</p>
          <v-text-field
            type="password"
            label="password"
            variant="solo-filled"
            rounded="lg"
            density="compact"
            flat
            hide-details
          ></v-text-field>
          <p class="my-2 pa-auto">Repeat password</p>
          <v-text-field
            type="password"
            label="password"
            variant="solo-filled"
            rounded="lg"
            density="compact"
            flat
            hide-details
          ></v-text-field>
          <div class="my-4">
            <p class="my-1">Your password must have:</p>
            <p class="my-1 text-error">
              <Icon size="16" name="yes"></Icon>
              Minimum 8 characters
            </p>
            <p class="my-1 text-error">
              <Icon size="16" name="yes"></Icon>
              Letters, numbers or special characters
            </p>
            <p class="my-3 text-error">Weak password</p>
          </div>
          <v-btn class="text-capitalize" block rounded="lg" variant="tonal">Save</v-btn>
        </v-form>
      </v-container>
    </v-card-text>
  </v-card>
</template>
<script setup>
import { VBtn, VCard, VCardText, VCardTitle, VForm, VTextField } from 'vuetify/components'
</script>
